{% extends "base.html" %}

{% block pm_breadcrumb %}
<li class="breadcrumb-item active" aria-current="page">编辑配置文件</li>
{% endblock %}

{% block content %}

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Edit Config</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/theme/monokai.min.css">
        <style>
            .container {
                max-width: 1200px;
                # 增加容器宽度
                margin: 0 auto;
                padding: 20px;
            }

            .btn {
                background-color: #007bff;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            .btn:hover {
                background-color: #0056b3;
            }

            .messages {
                margin-bottom: 20px;
            }

            .messages .success {
                color: green;
            }

            .messages .error {
                color: red;
            }

            .CodeMirror {
                height: 700px;
                # 增加编辑框高度
                width: 100%;
                # 使编辑框宽度占满容器
            }
        </style>
    </head>
    <body>
    <div class="container mt-3">
        <div class="messages">
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">{{ message }}</div>
            {% endfor %}
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <form method="post" enctype="multipart/form-data" class="mb-4">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="html_template" class="form-label">上传HTML模板:</label>
                        <input type="file" class="form-control" id="html_template" name="html_template" accept=".html">
                        <button type="submit" class="btn btn-primary mt-2" name="upload_html" style="margin-top: 10px;">
                            上传HTML模板
                        </button>
                    </div>
                </form>

                <form method="post" enctype="multipart/form-data" class="mb-4" style="margin-top: 10px;">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="excel_template" class="form-label">上传Excel模板:</label>
                        <input type="file" class="form-control" id="excel_template" name="excel_template"
                               accept=".xlsx,.xls">
                        <button type="submit" class="btn btn-primary mt-2" name="upload_excel"
                                style="margin-top: 10px;">上传Excel模板
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header h3" style="margin-top: 30px;">编辑配置文件</div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    <textarea id="config_content" name="config_content">{{ config_content }}</textarea>
                    <button type="submit" class="btn btn-success mt-3" style="margin-top: 10px;">保存配置</button>
                </form>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/mode/javascript/javascript.min.js"></script>
    <script>
        // 初始化 CodeMirror 编辑器
        var editor = CodeMirror.fromTextArea(document.getElementById("config_content"), {
            lineNumbers: true,
            mode: "javascript",
            theme: "monokai",
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        });
    </script>
    </body>
    </html>
{% endblock %}